<template>
    <a-upload

            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="action"
            :before-upload="beforeUpload"
            :customRequest="customRequest"

            @change="handleChange"
    >
        <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
        <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
                Upload
            </div>
        </div>
    </a-upload>
</template>

<script>
    function getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        console.log(reader.result)
        reader.readAsDataURL(img);
    }
    import uploadApi from "../../api/upload";
    export default {
        name: "UpLoad",
        props:{
            action: String,
            imageUrl: String,
            brandId: Number,
            fieldlName:String,
            commonUpload:Boolean
        },
        data() {
            return {
                loading: false,
                // imageUrl: '',
                // action:"https://www.mocky.io/v2/5cc8019d300000980a055e76"
            };
        },
        methods: {
            handleChange(info) {
                console.log(info)
               /* if (info.file.status === 'uploading') {
                    this.loading = true;
                    return;
                }
                if (info.file.status === 'done') {
                    // Get this url from response in real world.
                    getBase64(info.file.originFileObj, imageUrl => {
                        this.$emit("change-image-url",imageUrl)
                        // this.imageUrl = imageUrl;
                        this.loading = false;
                    });
                }*/
            },
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('You can only upload JPG file!');
                }
                const isLt2M = file.size / 1024 / 1024 < 1;
                if (!isLt2M) {
                    this.$message.error('Logo大小不能超过1MB!');
                }
                return isJpgOrPng && isLt2M;
            },
            /**
             * 自定义上传
             */
            customRequest(data) {
                let formData = new FormData();
                console.log(data)
                formData.append("file", data.file);
                this.saveFile(formData, data.file.name);
            },
            saveFile(formData, filename) {
                this.loading = true;
                if (this.commonUpload&&this.commonUpload===true){
                   /* if (this.fieldlName==="idUrlBack"){
                        this.$emit("change-image-url",this.fieldlName,"http://120.27.212.10:9090/group1/M00/00/02/eBvUCmCeKbSAay20AABxrBOi3Pc73.jpeg")


                    }else if (this.fieldlName==="idUrlFront"){
                        this.$emit("change-image-url",this.fieldlName,"http://120.27.212.10:9090/group1/M00/00/02/eBvUCmCeKbGANMpaAABxL49j5Dw419.jpg")
                    }else {
                        this.$emit("change-image-url",this.fieldlName,"http://120.27.212.10:9090/group1/M00/00/00/eBvUCl_ZdgmAGkv5AAJJ7HtejHk284.png")
                    }*/

                    uploadApi
                        .uploadCommon(formData,3)
                        .then(resp => {
                            if (resp.data.flag) {
                                const file = {};
                                file.uid = -2;
                                file.name = filename;
                                file.thumbUrl = resp.data.data;
                                this.$emit("change-image-url",this.fieldlName,"http://120.27.212.10:9090/group1/M00/00/02/eBvUCmCeKbSAay20AABxrBOi3Pc73.jpeg")
                                this.$message.success("上传成功");
                                this.loading = false;

                            } else {
                                this.loading = false;
                                this.$message.error(resp.data.message);
                            }
                        })
                        .catch(error => {
                            console.log(error)
                            this.loading = false;

                            this.$message.error(error);
                        });
                }else{
                    uploadApi
                        .uploadIdImage(formData,this.fieldlName)
                        .then(resp => {
                            if (resp.data.flag) {
                                this.loading = false;
                                const file = {};
                                file.uid = -2;
                                file.name = filename;
                                file.thumbUrl = resp.data.data;
                                this.$emit("change-image-url",this.fieldlName,file.thumbUrl)
                                this.$message.success("上传成功");
                            } else {
                                this.loading = false;
                                this.$message.error(resp.data.message);
                            }
                        })
                        .catch(error => {
                            this.loading = false;
                            console.log(error)

                            this.$message.error(error);
                        });
                }

            },
        },
    };
</script>
<style>
    .avatar-uploader > .ant-upload {
        width: 128px;
        height: 128px;
    }
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>